<template>
    <div>
        <el-dialog v-model="centerDialogVisible" title="Warning" width="500" align-center>
            <span>确定要删除吗</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="del">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">

            <el-form ref="ruleFormRef" style="max-width: 400px" :model="ruleForm" status-icon :rules="rules"
                label-width="auto" class="demo-ruleForm">

                <el-form-item label="shopAddress" prop="shopAddress">
                    <el-input v-model.number="ruleForm.shopAddress" />
                </el-form-item>
                <el-form-item label="shopName" prop="shopName">
                    <el-input v-model.number="ruleForm.shopName" />
                </el-form-item>
                任务：<input type="checkbox" name="" id=""> 状态<input type="checkbox" name="" id=""> 
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="ok">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <div><input v-model="search.searchValue" type="text"><el-button @click="getlist">搜索</el-button>
        <el-button @click="clear">重置</el-button>
    </div>
    <el-button @click="add">添加</el-button>
    <button @click="delAll">批量删除</button>
    <el-table :data="list" @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column type="expand">
            <template #default="scope">

            </template>
        </el-table-column>
        <el-table-column type="selection" width="55"  :selectable="selectable"/>
        <el-table-column label="Date" prop="shopAddress" />
        <el-table-column label="shopName" prop=" shopName" />
        <el-table-column label="图片" prop="shopImage">
            <template #default="scope">
                <img :src="scope.row.shopImage" style="width: 50px;height: 50px;" alt="">
            </template>
        </el-table-column>

        <el-table-column align="right">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">
                    修改
                </el-button>
                <el-popconfirm title="Are you sure to delete this?" @confirm="handleDelete(scope.row.id)">
                    <template #reference>
                        <el-button type="danger">删除</el-button>
                    </template>
                </el-popconfirm>
                <!-- <el-button size="small" type="danger" @click="">
                    删除
                </el-button> -->
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" v-model:page-size="pageSize" v-model:current-page="pageCode"
        :total="total" @change='getlist' />
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import axios from 'axios'
const list = ref([])
const total = ref(0)
const pageCode = ref(1)
const pageSize = ref(10)
const dialogVisible = ref(false)
const ruleForm = ref({
    shopAddress: '',
    shopName: '',
})
const search = ref({
    searchValue: ''
})
// const selectable=(val)=>{
//     console.log(val);
// }
const ids=ref([])

const handleSelectionChange= (val: any) => {
    console.log(val);
    ids.value= val
    // console.log(val.map((item: any) => item));
    
}
const delAll=async()=>{
    console.log(ids.value.map((item: any) => item.id));
    await axios.delete('/api/list', { params: { id:ids.value.map((item: any) => item.id).join(',') } })
    getlist()
}

// const selectable = (row: User) => ![1, 2].includes(row.id)
// console.log(selectable);

const handsc = () => {
    console.log(1123);
}
const clear = () => {
    search.value.searchValue = ''
    getlist()
}
const getlist = async () => {
    const res = await axios.get('/api/list', {
        params: {
            pageCode: pageCode.value,
            pageSize: pageSize.value,
            searchValue: search.value.searchValue
        }
    })
    console.log(res);
    const { data
        , totalCount } = res.data.data
    list.value = data
    total.value = totalCount
}
getlist()
const Flag = ref(true)
const add = () => {
    Flag.value = true
    dialogVisible.value = true
    ruleForm.value = {
        shopAddress: '',
        shopName: '',

    }
}
const handleEdit = (row) => {
    Flag.value = false
    dialogVisible.value = true
    ruleForm.value = row
}
const tkid = ref('')
const centerDialogVisible = ref(false)
const del = async () => {
    const id = tkid.value
    centerDialogVisible.value = false
    await axios.delete('/api/list', { params: { id } })
    getlist()
}
const handleDelete = async (id) => {
    centerDialogVisible.value = true
    tkid.value = id
    //
}
const ok = async () => {
    if (Flag.value) {
        await axios.put('/api/list', ruleForm.value)
    }
    else {
        await axios.post('/api/list', ruleForm.value)
    }
    getlist()
    dialogVisible.value = false
}
</script>
<style scoped></style>